// -------------------------- 1. 加载列表

// 接口文档：
//  pagenum  页码值
//  pagesize:  一页要多少条数据
//  cate_id   文章分类的 Id
//  state  文章的状态，可选值有：已发布、草稿
//  好处： 后台 减少数据量请求，减轻服务器压力

let data = {
    pagenum: 1, // 页码值
    pagesize: 3
}
list();
function list() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function (res) {
            // console.log(res);
            if (status == 0) {
                let str = '';
                res.data.forEach(function (ele, index) {
                    str += `
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${ele.pub_date.slice(0, ele.pub_date.length - 4)}</td>
                        <td>${ele.state}</td>
                        <th>
                        <!-- 编辑按钮 -->
                        <!-- 这个地址携带本条数据的id,在编辑页面可以通过url地址获取到本条数据的id，然后通过id从后台获取到本条数据 -->
                        <!-- a链接的target属性默认是 target='_self' -->
                        <a href="/article/edit/edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs" >编辑</a>
                        <!-- 删除按钮 -->
                        <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger btnDelete">删除</button>
                        </th>
                    </tr>
                    `;
                });

                $('tbody').html(str);
                // 分页功能 这样写便于维护
                page(res.total);
            }
        }
    });
}




// ------------------------- 2. 分页功能
let laypage = layui.laypage;
function page(num) {
    laypage.render({
        elem: 'page', // 让哪个盒子被渲染为分页器，不用加 # 
        count: num,  //数据总数，从服务器获取
        // 初始化 显示自己设置的(data对象)
        limit: data.pagesize,  // 每页显示条数
        curr: data.pagenum,  // 在第几页  模块自动根据提交数，渲染出分页器
        // 给用户提供自己选择页码的方式
        limits: [2, 3, 5, 10], // 下拉框的值，表示每页多少条，下拉框用于更换
        // 功能选择
        layout: ['prev', 'page', 'next', 'count', 'limit', 'skip'],
        // 当用户点击的时候，专门函数，执行用户点击行为
        // 页面一加载、刷新页面 及 页码切换 的时候，会执行jump函数
        jump: function (obj, key) {
            // key: true非用户操作(页面加载/刷新); 用户操作就是undefined(点击行为)
            // console.log(obj, key);
            // obj 当前分页的状态：页码、要求几条数据、数据总量 等信息

            // 当用户点击的时候再执行 
            if (key === undefined) {
                // 修改 全局 obj中的属性值
                data.pagenum = obj.curr; // 修改页码值
                data.pagesize = obj.limit;  // 当前页显示多少条
                // 重新渲染列表页
                list();
            }
        }
    });
}


// --------------------- 3. 筛选
// --------------------- 3.1 筛选-分类框渲染
let form = layui.form;
$.ajax({
    url: '/my/article/cates',
    success: function (res) {
        // console.log(res);
        if (res.status == 0) {
            let str = '<option value="">请选择文章类别</option>';
            res.data.forEach(function (item, index) {
                str += `
                <option value="${item.Id}">${item.name}</option>
                `;
                $('.cate').html(str);
                // form模块：如果表单元素动态插入，样式不会跟着动态渲染
                // 需要调用渲染更新方法
                form.render('select');
            });
        }
    }
});

// --------------------- 3.2 点击筛选，渲染页面
$('form').submit(function (e) {
    e.preventDefault();
    // 收集数据，设置给全局变量 data 
    // let str = $(this).serialize(); // 字符串
    let arr = $(this).serializeArray();  // 两个select表单  数组对象
    // console.log(arr);
    // 传入后台的数据    
    data.cate_id = arr[0].value;  // 文章类别
    data.state = arr[1].value;   // 文章状态

    // 业务上设计：带着分类(其他条件)查询列表，从第一页开始；
    // 筛选后，默认在第一页展示筛选的数据
    data.pagenum = 1;
    // 再次发出ajax请求，重新渲染页面
    list();
});


// ----------------------------------- 4. 删除功能
let layer = layui.layer;
// 动态url地址/动态路由  /my/article/deletecate/:id      
$('tbody').on('click', '.btnDelete', function () {
    layer.confirm('你确认要删除吗?', (index) => {
        // 获取对应的id
        let id = $(this).attr('data-id');
        // 点击确定，执行这里的代码
        $.ajax({
            url: '/my/article/delete/' + id,
            success: function (res) {
                layer.msg(res.message);
                if (res.status == 0) {
                    // 删除后，回到第一页
                    data.pagenum = 1;
                    // 再次渲染页面
                    list();
                }
            }
        });
    });

});

window.key = 'list页面'